<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('levelConfig.index.会员等级管理')" />
    <!-- <SearchCom
      :searchList="searchList"
      @search="toSearch"
      @reset="handleReset"
    /> -->

    <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'vipType:add'">
      <div class="addBtn flex_aic_jcc" @click="handleAdd">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('levelConfig.index.新增会员等级') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      border
      v-loading="loading"
    >
      <el-table-column :prop="'name' + locale" :label="$t('levelConfig.index.会员等级名称')" />
      <el-table-column prop="upgradeLimit" :label="$t('levelConfig.index.升级消费金额')" />
      <el-table-column prop="backgroundColor" :label="$t('levelConfig.index.背景颜色')">
        <template #default="{ row }">
          <div class="colorRact" :style="`background: ${row.backgroundColor}`"></div>
        </template>
      </el-table-column>
      <el-table-column prop="cardColor" :label="$t('levelConfig.index.卡片颜色')">
        <template #default="{ row }">
          <div class="colorRact" :style="`background: ${row.cardColor}`"></div>
        </template>
      </el-table-column>
      <el-table-column prop="textColor" :label="$t('levelConfig.index.文字颜色')">
        <template #default="{ row }">
          <div class="colorRact" :style="`background: ${row.textColor}`"></div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('levelConfig.index.操作')" fixed="right" width="200px">
        <template #default="{ row }">
          <div class="operationBtnRow">
            <el-button
              class="ml0"
              type="text"
              size="small"
              @click="handleEdit(row)"
              v-my-point="'vipType:edit'"
              >{{ $t('levelConfig.index.编辑') }}</el-button
            >
            <el-popconfirm
              :title="$t('levelConfig.index.确定删除吗')"
              @confirm="handleDelete(row)"
              :confirm-button-text="$t('levelConfig.index.确定')"
              :cancel-button-text="$t('levelConfig.index.取消')"
              width="300px"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small" v-my-point="'vipType:del'">{{ $t('levelConfig.index.删除') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model="editDiaVisible" :data="editDiaData" @rest="getDataList"></EditDia>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import EditDia from "./editDia.vue";
import Api from "@/config/api/api";
import moment from "moment";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();

const searchList = computed(() => [
    {
        label: t('levelConfig.index.名称'),
        key: "name",
        type: "input",
    },
]);

const {
    currentPage,
    pageSize,
    total,
    tableData,
    loading,
    getDataList,
    handleSizeChange,
    handleCurrentChange,
    handleSearch,
    handleReset,
} = useTableMixin(Api.vipType_list);

const editDiaVisible = ref(false);
const editDiaData = ref({});

const handleAdd = (row) => {
    editDiaVisible.value = true;
    editDiaData.value = null;
};

const handleEdit = (row) => {
    editDiaVisible.value = true;
    editDiaData.value = JSON.parse(JSON.stringify(row));
};

const toSearch = (params) => {
    handleSearch({
        ...params,
        ['name' + locale.value]: params.name
    });
};

const handleStatus = (row) => {
    Api[row.status == 1 ? "enable_vip" : "disable_vip"](row.id).then((res) => {
        if (res.status == 200) {
            ElMessage.success(t('levelConfig.index.操作成功'));
            getDataList();
        }
    });
};

const handleDelete = (row) => {
    Api.vipType_delete([row.id]).then((res) => {
        if (res.status == 200) {
            ElMessage.success(t('levelConfig.index.操作成功'));
            getDataList();
        }
    });
};
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(24, 144 ,255, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}

.colorRact {
  width: 40px;
  height: 40px;
}
</style>
